<template>
  <el-table :data="props.data" scrollbar-always-on stripe
    :header-cell-style="{background: 'var(--el-fill-color-light)'}" @sort-change="sortChangeHandle" style="width: 100%;height: 100%">
    <el-table-column type="index" width="50" fixed="left" label="#"  />
    <el-table-column prop="inputBarcode" label="当前条码号" width="180" fixed="left" header-align="left" align="left" show-overflow-tooltip >
      <template #default="{ row }">
        <el-tag type="primary">{{ inputBarcodeFormatter(row.inputBarcode )}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="inputTime" label="投入时间" width="200" show-overflow-tooltip />
    <el-table-column prop="materialName" label="物料名称" width="180" show-overflow-tooltip />
    <el-table-column prop="produceProcessCode" label="产出工序" width="120" show-overflow-tooltip />
    <el-table-column prop="qty" label="投料数量" width="100" show-overflow-tooltip>
      <template #default="{ row }">
        <el-tag type="success">{{ row.qty }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="consumeQty" label="产出消耗数量" width="120" show-overflow-tooltip>
      <template #default="{ row }">
        <el-tag type="warning">{{ row.consumeQty }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="unit" label="单位" width="80" show-overflow-tooltip />
    <el-table-column prop="receiptCode" label="收料单号" width="180" show-overflow-tooltip />
    <el-table-column prop="supplierName" label="供应商名称" width="200" show-overflow-tooltip />
    <el-table-column prop="asnNo" label="送货单号" width="210" show-overflow-tooltip />
    <el-table-column prop="stockBatch" label="入库批次" width="150" show-overflow-tooltip />
    <el-table-column prop="productionBatch" label="生产批次" width="150" show-overflow-tooltip />
  </el-table>
</template>

<script setup lang="ts" name="systemArchive">
import { BasicTableProps, useTable } from "/@/hooks/table";

// 获取props
const props = defineProps<{
  data: any[]
}>()


// 多选变量
const multiple = ref(true)

const state: BasicTableProps = reactive<BasicTableProps>({
  // pageList: fetchList
})
//  table hook
const {
  sortChangeHandle,
  tableStyle
} = useTable(state)

function inputBarcodeFormatter(value) {
  // 如果是纯数字则显示`-`
  if (value && value.match(/^[0-9]+$/)) {
    return '-'
  } else {
    return value
  }
}

</script>

<style scoped>
.badge {
  display: inline-flex;
  align-items: center;
}
</style>